<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发邮件</title>
  <!--<link rel="shortcut icon" href="images/ico/logo_2.png" type="image/x-icon"/>-->
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/send_emails.css">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <div class="order-detail">
    <!--发送邮件-->
    <div class="send-emails-mask" v-if="isShowSendEmail">
      <div class="mask"></div>
      <div class="modal">
        <form action="#">
          <div class="model-header">
            <span>发送邮件</span>
            <i @click="closeSendEmails"></i>
          </div>
          <div class="model-content">
            <div class="content">
              <div class="item">
                <label for="recipients">
                  <span>*收件人：</span>
                  <input type="text" id="recipients">
                </label>
              </div>
              <div class="item">
                <label for="theme">
                  <span>*邮件主题：</span>
                  <input type="text" id="theme">
                </label>
              </div>
              <div class="remark">
                <span>*邮件内容：</span>
                <textarea></textarea>
              </div>
              <div class="btn">
                <input type="button"
                       v-for="(btnText, index) in submitRemitMsgBtn"
                       :value="btnText"
                       :class="submitRemitMsgBtnIndex === index ? 'active': ''"
                       @click="btnIndexTab(index)"
                >
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--发送成功-->
    <div class="send-succeed-mask" v-if="isShowSendSucceed">
      <div class="mask"></div>
      <div class="modal">
        <form action="#">
          <div class="model-header">
            <span>提示</span>
            <i @click="closeSendSucceed"></i>
          </div>
          <div class="model-content">
            <div class="content">
              <i class="icon"></i>
              <p class="text">发送成功</p>
              <input class="btn" type="button" value="关闭">
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="sidebar">
      <a class="logo" href="./index.html">NOWPAY</a>
      <a class="sidebar-item"
         v-for="(item,index) in sidebarNavList"
         :class="index === 3?'sidebar-active':''"
         :href="item.href"
      >
        <i :class="item.icon"></i>
        <span>{{item.text}}</span>
      </a>
    </div>

    <div class="main">
      <div class="main-top">
        <div class="top-content">
          <div class="content-left">欢迎使用NOVOXPAY出入金系统！</div>
          <div class="content-right">
            <span id="zfk"></span>
            <span id="watt"></span>
            <span id="hms"></span>
            <span>{{userName}}</span>
          </div>
        </div>
        <a class="top-logout" href="./login.html"></a>
      </div>
      <div class="main-warp">
        <div class="header">
          <span>订单详情</span>
          <a href="match.html">返回</a>
          <input @click="showSendEmails"
                 type="button" value="发送邮件"/>

        </div>
        <div class="order">
          <div class="order-item">
            <div class="item-header">
              <span>订单信息</span>
            </div>
            <div class="item-content">
              <div class="content">
                <li>
                  <label for="0">
                    <span>订单编号：</span>
                    <input type="text" value="20180802_1500022135" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>支付单号：</span>
                    <input type="text" value="1500022135" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>订单状态：</span>
                    <input type="text" value="服务商已打款" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>USTD数量：</span>
                    <input class="active" type="text" value="1000" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>经纪商：</span>
                    <input type="text" value="CPT" id="0">
                  </label>
                </li>
              </div>
            </div>
          </div>

          <div class="order-item">
            <div class="item-header">
              <span>付款信息</span>
            </div>
            <div class="item-content">
              <div class="content">
                <li>
                  <label for="0">
                    <span>收款金额：</span>
                    <input class="active" type="text" value="￥7000" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>收款人姓名：</span>
                    <input class="active" type="text" value="张三" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>收款人银行：</span>
                    <input type="text" value="农业银行 广东茂名市茂东支行" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>收款人账号:</span>
                    <input class="active" type="text" value="6228 4811 7674 6694 972" id="0">
                  </label>
                </li>
                <li>
                  <label for="0">
                    <span>收款凭证:</span>
                    <input @click="voucher" type="button" value="查看凭证" id="0">
                  </label>
                </li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script src="js/index.js"></script>
<script src="js/read_cache.js"></script>
